<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
    <title>Cindy JS</title>
		<script type="text/javascript" src="../../build/js/Cindy.js"></script>
		<script type="text/javascript" src="../../build/js/CindyGL.js"></script>
    <link rel="stylesheet" href="../../build/js/CindyJS.css">
  </head>
	
		<body style="font-family:Arial;">
			
			<h1>CindyJS: Taylor series of complex functions</h1>
			
			<script id="csinit" type="text/x-cindyscript">			
			color(z) := ( //what color should be given to a complex number z?
			  regional(n, grey1, grey2);
			  n = 12;
			  z = log(z)/2/pi;

			  zfract = n*z - floor(n*z); //value of n*z in C mod Z[i]

			  grey1 = im(zfract);
			  grey2 = re(zfract);
				
			  hue(im(z))*(.6+.4*re(sqrt(grey1*grey2)));
		  );
				n = 5;
				
				lastf = "";
				
				zoom = 1;
				lzoom = zoom;

			</script>
			
			<script id="csdraw" type="text/x-cindyscript">
			if(Input.text!=lastf & Input.text!="", 
				parse("f(z) :=" + Input.text);
				lastf = Input.text;
			);
			
			factorial(n) := if(n==0, 1, n*factorial(n-1));
			
			coeff = autodiff(f(z), [complex(A*zoom)], n)_1;
			forall(0..n, k, coeff_(k+1)=coeff_(k+1)/factorial(k));
			
			t(z) := coeff*apply(0..n, k, (z-complex(A*zoom))^k);
			

			colorplot(
				z = zoom*complex(#);
				color(t(z));
				,
				(-2,-2),(2,2)
			);
			
			colorplot(
				z = zoom*(complex(#)+4);
				color(f(z));
				,
				(-6,-2),(-2,2)
			);
			
			drawtext((-5.9,1.7), "$f(z) =$");
			
			drawtext((-1.7,1.7), "$\sum_{k=0}^{"+n+"} \frac{f^{(k)}(a)}{k!} (z-a)^k$");
			
			draw((1.8,-1.8),(1.8,1.8), color->[0,0,0]);
			N.x = 1.8;
			n = round(5*(N.y+1.8));
			n = max(1, n);
			N.y = n/5-1.8;
			
			draw((-5,-1.8),(1,-1.8), color->[0,0,0]);
			drawtext((1.1,N.y),"$n = " + n + "$");
			Zoom.y = -1.8;
			
			Zoom.x = max(Zoom.x, -5);
			Zoom.x = min(Zoom.x, 1);
			
			zoom = exp(.5*(Zoom.x+3));
			
			if(lzoom!=zoom,
				A.xy = A.xy*lzoom/zoom;
			);
			lzoom = zoom;
			
			</script>
			<div>
			<select size="5" id="sel" onchange="cdy.evokeCS(this.value);" style="width:10em;">  
				<option value='Input.text = "1/z";'>1/z</option>
				<option value='Input.text = "z^(1/2)";'>square root</option>
				<option value='Input.text = "log(z)";'>logarithm</option>
				<option value='Input.text = "sin(z)";'>sine</option>
				<option value='Input.text = "sin(z)/cos(z)";'>tangent</option>
				<option value='Input.text = "exp(z)";'>exponential function</option>
			</select>
			</div>
			<div id="CSCanvas"></div>
			
			<script type="text/javascript">
					var cdy = CindyJS({canvasname:"CSCanvas",
											scripts: "cs*",
											geometry: [
												{name:"A", type:"Free", pos:[1.1, 0.1],color:[1,0,0]},
												{name:"N", type:"Free", pos:[1, 0],color:[1,1,1], size:8},
												{name:"Zoom", type:"Free", pos:[-2, -.3],color:[1,1,1], size:8},
												{name: "Input", type: "EditableText", pos: [-5.2, 1.7], color: [0.0, 0.0, 0.0], fillcolor: [1.0, 0.784, 0.0], fillalpha: 0.5, minwidth: 300, text: "1/(z^2+1)"}
											],
											animation: {autoplay: true},
											ports: [{
												id: "CSCanvas",
												width: 800,
												height: 400,
												transform: [ { visibleRect: [-6,-2, 2, 2] } ]
											}],
											use: ["CindyGL", "katex"]
										});
			</script>
			
			<div>
				On the left, a phase portrait of a complex function is displayed.
			</div>
			<div>
			On the right, one can see the approximation of the function through it's Taylor polynomials at the red base point.
			</div>
			<div>
			The complex function, the base point, the order of the polynomial and the zoom can be modified.
			</div>
	       
		</body>
	</html>
